<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@   taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html >
<html>
<head>
	<base href="<%=basePath%>">
     <meta charset="utf-8">

        <title> Lexy - 注册 </title>
        
　　<meta name="keywords" content="lexy,Lexyui,lexyui,lexy博客"> 
        <meta name="description" content="lexy 博客站">
        <meta name="author" content="lexy">
        <meta name="robots" content="noindex, nofollow">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Icons -->
        <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
        <link rel="shortcut icon" href="plugins/v2/img/favicons/favicon.png">

        <link rel="icon" type="image/png" href="plugins/v2/img/favicons/favicon-16x16.png" sizes="16x16">
        <link rel="icon" type="image/png" href="plugins/v2/img/favicons/favicon-32x32.png" sizes="32x32">
        <link rel="icon" type="image/png" href="plugins/v2/img/favicons/favicon-96x96.png" sizes="96x96">
        <link rel="icon" type="image/png" href="plugins/v2/img/favicons/favicon-160x160.png" sizes="160x160">
        <link rel="icon" type="image/png" href="plugins/v2/img/favicons/favicon-192x192.png" sizes="192x192">

        <link rel="apple-touch-icon" sizes="57x57" href="plugins/v2/img/favicons/apple-touch-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="plugins/v2/img/favicons/apple-touch-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="plugins/v2/img/favicons/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="plugins/v2/img/favicons/apple-touch-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="plugins/v2/img/favicons/apple-touch-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="plugins/v2/img/favicons/apple-touch-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="plugins/v2/img/favicons/apple-touch-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="plugins/v2/img/favicons/apple-touch-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="plugins/v2/img/favicons/apple-touch-icon-180x180.png">
        <!-- END Icons -->

        <!-- Stylesheets -->
        <!-- Web fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400italic,600,700%7COpen+Sans:300,400,400italic,600,700">

        <!-- Bootstrap and OneUI CSS framework -->
        <link rel="stylesheet" href="plugins/v2/css/bootstrap.min.css">
        <link rel="stylesheet" id="css-main" href="plugins/v2/css/oneui.css">

        <!-- You can include a specific file from css/themes/ folder to alter the default color theme of the template. eg: -->
        
        
    </head>
    <body>
        <!-- Page Container -->
        <div id="page-container" class="side-scroll header-navbar-fixed header-navbar-transparent">

            <!-- Header -->
            <jsp:include page="temple/_top_all.jsp"></jsp:include>
            <!-- END Header -->

            <!-- Main Container -->
            <main id="main-container">
                <!-- Hero Content -->
                <div class="bg-primary-dark">
                    <section class="content content-full content-boxed overflow-hidden">
                        <!-- Section Content -->
                        <div class="push-100-t push-50 text-center">
                            <h1 class="h2 text-white push-10 animated fadeInDown" data-toggle="appear" data-class="animated fadeInDown"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">最新的故事只为你。</font></font></h1>
                            <h2 class="h5 text-white-op animated fadeInDown" data-toggle="appear" data-class="animated fadeInDown"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">随意探索和阅读。</font></font></h2>
                        </div>
                        <!-- END Section Content -->
                    </section>
                </div>
                <!-- END Hero Content -->
                <!-- Content -->
			<div class="bg-white">
				<section class="content content-boxed">
					<!-- Section Content -->
					<div class="row items-push push-50-t push-30">
						<div class="col-md-6 col-md-offset-3">
							<form id="sginup-form" class="sginup-form form-horizontal ">
								<div class="form-group">
									<div class="col-xs-12">
										<div class="form-material form-material-success ">
											<input class="form-control" type="text" id="name" name="name" placeholder="请输入用户名...">
											<label for="name">用户名</label></div>
									</div>
								</div>
								
								<div class="form-group">
									<div class="col-xs-12">
										<div class="form-material form-material-success">
											<input class="form-control" type="text" id="email" name="email" placeholder="请输入邮箱 ...">
											<label for="email">邮箱</label></div>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-9">
										<div class="form-material form-material-success">
											<input class="form-control" type="text" id="email-code" name="email-code" placeholder="请输入邮箱验证码 ...">
											<label for="email-code">邮箱验证码</label></div>
									</div>
									<div class="col-xs-3">
										<button id="btn_vilidate_cdoe"class="btn btn-block btn-success"   disabled = "true"type="button">
											发送验证码  </button>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<div class="form-material form-material-success">
											<input class="form-control" type="password" id="password" name="password" placeholder="请输入密码...">
											<label for="password">密码</label></div>
									</div>
								</div>
								<div class="form-group">
									<div class="col-xs-12">
										<div class="form-material form-material-success">
											<input class="form-control" type="password" id="val-confirm-password" name="val-confirm-password" placeholder="请再次输入密码...">
											<label for="val-confirm-password">确认密码</label></div>
									</div>
								</div>
							<div class="form-group">
								<div class="col-xs-6">
									<label class="css-input switch switch-sm switch-primary">
										<input type="checkbox" id="frontend-signup-terms"
										name="frontend-signup-terms"><span></span><font
										style="vertical-align: inherit;"><font
											style="vertical-align: inherit;"> 我同意条款和条件</font></font>
									</label>
									<a href="#" data-toggle="modal" data-target="#modal-signup-terms"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">查看条款</font></font></a>
								</div>
								<div class="col-xs-6">
									<div class="font-s13 text-right push-5-t">已有帐号前往
										<a href="v2/tologin"> <font
											style="vertical-align: inherit;"><font
												style="vertical-align: inherit;">登录</font></font></a>
									</div>
								</div>
							</div>
							<div class="form-group">
									<div class="col-sm-6 col-sm-offset-3">
										<button id="btn-form" class="btn btn-block btn-success" type="button">
											<i class="fa fa-plus pull-right"></i>注册  </button>
									</div>
								</div>
							</form>
						</div>
					</div>
					<!-- END Section Content --></section>
			</div>
			<!-- END Content -->
			<!-- Login -->
			<div class="bg-gray-lighter">
				<section class="content content-full content-boxed">
					<!-- Section Content -->
					<div class="push-20-t push-20 text-center">
						<h3 class="h4 push-20 visibility-hidden" data-toggle="appear">Do you already have an account?</h3>
						<a class="btn btn-rounded btn-noborder btn-lg btn-success visibility-hidden" data-toggle="appear" data-class="animated bounceIn" href="frontend_login.html">Log In</a></div>
					<!-- END Section Content --></section>
			</div>
			<!-- END Login -->
			<!-- Terms Modal -->
			<div class="modal fade" id="modal-signup-terms" tabindex="-1" role="dialog" aria-hidden="true">
				<div class="modal-dialog modal-dialog-popout">
					<div class="modal-content">
						<div class="block block-themed block-transparent remove-margin-b">
							<div class="block-header bg-primary-dark">
								<ul class="block-options">
									<li>
										<button data-dismiss="modal" type="button">
											<i class="si si-close"></i>
										</button>
									</li>
								</ul>
								<h3 class="block-title">Terms &amp; Conditions</h3></div>
							<div class="block-content">
								<p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
								<p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
								<p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
								<p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
								<p>Dolor posuere proin blandit accumsan senectus netus nullam curae, ornare laoreet adipiscing luctus mauris adipiscing pretium eget fermentum, tristique lobortis est ut metus lobortis tortor tincidunt himenaeos habitant quis dictumst proin odio sagittis purus mi, nec taciti vestibulum quis in sit varius lorem sit metus mi.</p>
							</div>
						</div>
						<div class="modal-footer">
							<button class="btn btn-sm btn-default" type="button" data-dismiss="modal">Close</button>
							<button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">
								<i class="fa fa-check"></i>I agree</button>
						</div>
					</div>
				</div>
			</div>
                 
                
                
            </main>
            <!-- END Main Container -->

            <!-- Footer -->
           		<jsp:include page="temple/_footer_all.jsp"></jsp:include>
            <!-- END Footer -->
        </div>
        <!-- END Page Container -->

        <!-- OneUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock, Appear, CountTo, Placeholder, Cookie and App.js -->
        <script src="plugins/v2/js/core/jquery.min.js"></script>
        <script src="plugins/v2/js/core/bootstrap.min.js"></script>
        <script src="plugins/v2/js/core/jquery.slimscroll.min.js"></script>
        <script src="plugins/v2/js/core/jquery.scrollLock.min.js"></script>
        <script src="plugins/v2/js/core/jquery.appear.min.js"></script>
        <script src="plugins/v2/js/core/jquery.countTo.min.js"></script>
        <script src="plugins/v2/js/core/jquery.placeholder.min.js"></script>
        <script src="plugins/v2/js/core/js.cookie.min.js"></script>
        <script src="plugins/v2/js/app.js"></script>
        <script src="plugins/v2/js/pub.js"></script>


		<!-- Page JS Plugins -->
		<script src="plugins/v2/js/plugins/jquery-validation/jquery.validate.min.js"></script>
		<script src="plugins/v2/js/pages/register.js"></script>

        <!-- Page JS Code -->
        <script>
        
        var checkVal = false;
        
		 jQuery(function () {
			 
		     // Init page helpers (Appear + CountTo plugins)
	     	App.initHelpers(['appear', 'appear-countTo']);
	  		$("#btn-form").click(function(){
				ajaxForm();
	  		})
		   $("#btn_vilidate_cdoe").click(function(){
		  	 	sendEmailCode();
		  	})
  
			$("#email").blur( function () {
				checkMail(); 
			});
  
		 });
		var countdown = 60;
		function emailCodeTimer(val) { 
			console.log(countdown);
			if (countdown == 0) { 
		 	val.removeAttr("disabled"); 
		 	val.text("点击获取验证码"); 
		 	countdown = 60; 
			} else { 
		 	val.attr("disabled", true); 
		 	val.text(countdown+"秒后可重发"); 
		 	countdown--; 
		 	setTimeout(function() { 
		 		emailCodeTimer(val);
		 	},1000) 
			} 
		} 
            
    	   
            function sendEmailCode(){
            	var reqStr = "email="+$("#email").val();
            	
            	if(checkVal){
	            	var dom = $("#btn_vilidate_cdoe");
	            	dom.removeAttr("disabled"); 
					var result = doPost("v2/user/sendEmailCode" , reqStr);
	            	console.log(result);
	            	if("200"==result.code){
		            	emailCodeTimer(dom);
	            	}
            	}
            }
            
			function ajaxForm(){
     		   var validata = $("#sginup-form").valid();
     		   var data = jQuery("#sginup-form").serializeObject();
     		   console.log(data);
     		   if(validata){
     		   		/* var result =  doPost("sginup", data);
     		   		if(result.code="200"){
     		   			alert(result.message);
     		   			window.location.href="log";
     		   		} */
     		   		
     		   		
     		   }
     	   }
			
			
				
			
			
			
			
			function checkMail(){
				var reqStr = "email="+$("#email").val();
				var result = doPost("v2/user/checkEmailUnique" , reqStr);
            	console.log(result);
            	if(result.detail.checkVal){
            		checkVal = true;
            		var dom = $("#btn_vilidate_cdoe");
	            	dom.removeAttr("disabled"); 
            	}else{
            		console.log("error");
            	
            		$("#email-error").text("邮箱已经存在,请重新输入邮箱......");
            	}
			}
        </script>
    </body>
</html>